<template>
  <div style="height:auto;" v-if="JouneryDayInfo != null && JouneryDayInfo.length > 0">
    <div class="nav_li" >
      <!--div class="bot" v-if="skuDetail.isVip && userInfo.id">立即预订</div-->
      <div class="num"><i class="iconfont icon-lianxiwomen"></i></div>
      <div class="nav_left">
        <div class="li" :data-key="0" :class="{ 'active': activeTab === 0 }" @click="tabClick(0, 1, 'feature')">行程特色</div>
        <div class="li" :data-key="1" :class="{ 'active': activeTab === 1 }" @click="tabClick(1, 1, 'introduction')">行程详情</div>
        <div class="li" :data-key="2" :class="{ 'active': activeTab === 2 }" @click="tabClick(2, 1, 'fee')">费用说明</div>
        <div class="li" :data-key="3" :class="{ 'active': activeTab === 3 }" @click="tabClick(3, 1, 'booking')">预订须知</div>
        <div class="li" :data-key="4" :class="{ 'active': activeTab === 4 }" @click="tabClick(4, 1, 'download')" v-if="!!Cmsfiles.length>0 && isVip">文档下载</div>
      </div>
    </div>

    <div class="main2" style="padding-top: 0px;">
      <!-- 一、行程特色 -->
      <ul class="u_route" id="feature">
        <div class="main2_left">
          <div class="main2_left_t" style=""> <i class="fa fa-plane"></i> 行程特色 </div>
        </div>
        <div class="main2_right" v-for="(JouneryGroupInfo, index) in JouneryGroups" :key="index" :class="index == 0 ? 'wrap-box':'wrap-box hide'" find-trip-center>
          <div class="main2_right_m2 active">
            <!-- 收客须知 开始 -->
            <div class="info_box" v-if="JouneryGroupInfo.Instructions != '' && JouneryGroupInfo.isVip">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />收客须知（直客不显示）</div>
            <div class="main2_right_m2_m">
              <p class="info_paragraph" v-show="JouneryGroupInfo.Instructions!=''" v-html="JouneryGroupInfo.Instructions"> </p>
            </div>
            </div>

            <!-- 行程特点 开始 -->
            <div class="info_box" v-if="!!JouneryGroupInfo.Summary">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />行程特点</div>
            <div class="main2_right_m2_m">
              <p class="info_paragraph" v-html="JouneryGroupInfo.Summary"> </p>
            </div>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </ul>
      
      <!-- 二、行程介绍 -->
      <ul class="u_route" id="introduction">
        <div class="main2_left">
          <div class="main2_left_t" style="background: none; height: 1px; line-height: 1px;"></div>
          <div class="trip_m" style="display: none;">
            <div class="li" :class="k === 0 ? 'active' : ''" v-for="(JouneryInfo, k ) in JouneryDayInfo" :key="k"><span>第{{JouneryInfo.Days}}天</span></div>
          </div>
        </div>
        <div class="main2_right" v-for="(JouneryGroupInfo, index) in JouneryGroups" :key="index" :class="index == 0 ? 'wrap-box':'wrap-box hide'" find-trip-center>
          <!--div class="main2_right_m2_nav" style="display: none;">
            <div class="trip_nav">
              <div class="li" data-sort="A"><span id="OPL00075506" route-data="A"></span></div>
            </div>
            <div class="route-A curr route_menu" style="">
              <li :class="{ 'active': routerTab === 0 }" @click="tabClick(0, 2)">详细行程</li>
              <li :class="{ 'active': routerTab === 1 }" @click="tabClick(1, 2)">费用说明</li>
              <li :class="{ 'active': routerTab === 2 }" @click="tabClick(2, 2)">注意事项</li>
              <li :class="{ 'active': routerTab === 3 }" @click="tabClick(3, 2)">预订须知</li>
            </div>
          </div-->

          <div class="main2_right_m2 active">
            <!-- 五 行程介绍 开始 -->
            <div class="info_box" v-if="!!JouneryDayInfo">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />详细行程</div>
            <div class="main2_right_m3_m stroke" >
              <div class="main2_right_m3_m1" v-for="(JouneryInfo, k ) in JouneryDayInfo" :key="k">
                <div class="main2_right_m3_m1_l">
                  <p>Day</p>
                  <span>{{JouneryInfo.Days > 9 ? JouneryInfo.Days : '0'+ JouneryInfo.Days}}</span>
                </div>
                <div class="main2_right_m3_m1_r">
                  <h2>
                    <div class="placecontent">
                      <span class="startp" v-for="(JouneryProductTravelType, indexType) in JouneryInfo.ProductTravelTypes" :key="indexType" >
                        <i :class="'iconfont icon-vehicle-' + JouneryProductTravelType.Type" v-show="indexType > 0"></i>
                        <span>{{JouneryProductTravelType.TreeName}}</span>
                      </span>
                    </div>
                  </h2>
                  <div class="dinner" style="margin-top:8rpx;padding-right:0;" v-if="JouneryInfo.viewspots.length > 0">
                    <i class="iconfont icon-daohangxianlu fl" style="float:left; display: inline-block; vertical-align: -10px; margin-right: 8px; "></i>
                    <div class="breakcon" style="padding-right:0;">
                      <span class="breakfast">景点：</span>
                      <span v-for="(viewspot, indexVs) in JouneryInfo.viewspots" :key="indexVs" >
                        <i class="iconfont icon-dian"
                          style="background:#333;font-size:18px;vertical-align:-2px;-webkit-background-clip:text;-webkit-text-fill-color:transparent; "
                          v-show="indexVs > 0"></i>
                        <span>{{viewspot.name}}</span>
                      </span>
                    </div>
                  </div>
                  
                  <div class="dinner">
                    <i class="iconfont icon-meal fl" style="vertical-align: -10px; margin-right: 8px; "></i>
                    <div class="breakcon" v-if="JouneryInfo.Lunch===''">
                      <span class="breakfast">用餐：</span>自理<i class="iconfont icon-hotel fl"></i>
                    </div>
                    <div class="breakcon" v-if="JouneryInfo.Lunch!=''">
                      <span class="breakfast">用餐：</span>
                      <span class="lunch" v-for="(lunch, index) in JouneryInfo.Lunch" :key="index">
                        {{lunch.Name+'餐'}} 
                        <i :class="'iconfont icon-' + lunch.Type + '-2'" style="font-size:16px;margin-right:8rpx;vertical-align:-2px;"></i>
                      </span>
                    </div>
                    <div class="jiudiancon">
                      <i class="iconfont icon-hotel fl" style="vertical-align:-10px; margin-right: 8px; "></i>
                      <span class="breakfast">酒店：</span><span>{{JouneryInfo.HotelList}}</span>
                    </div>
                  </div>

                  <div class="travelcontent">
                    <p class="traveldec" v-html="JouneryInfo.Content"></p>
                    <!-- 轮播开始 v-show="travelActive ==  k"-->
                    <div v-show="JouneryInfo.JouneryImgInfo.length>0" style="padding: 0 5px;">
                      <div class="swiper-slide" v-for="(ImgInfo, index) in JouneryInfo.JouneryImgInfo" :key="index">
                        <img :src="ImgInfo.ImgUrl" class="slideimg" onerror="onerror=null;src='about:blank'">
                        <p>{{ImgInfo.TreeName}}</p>
                      </div>
                    </div>
                    <!-- 轮播结束 -->
                  </div>
                </div>
              </div>
            </div>
            </div>
            <!-- 五 行程介绍 结束 -->
          </div>
        </div>
        <div class="clear"></div>
      </ul>
    
      <!-- 三、费用说明 -->
      <ul class="u_route" id="fee">
        <div class="main2_left">
          <div class="main2_left_t" style=""> <i class="fa fa-futbol-o" style="padding: 0;"></i> 费用说明></div>
        </div>
        <div class="main2_right" v-for="(JouneryGroupInfo, index) in JouneryGroups" :key="index" :class="index == 0 ? 'wrap-box':'wrap-box hide'" find-trip-center>
          <div class="main2_right_m2 active">
            <!-- 七、费用包含-->
            <div class="info_box" v-if="!!JouneryGroupInfo.CostInclude">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />费用包含</div>
            <div class="main2_right_m4_m">
              <p class="info_paragraph" v-html="JouneryGroupInfo.CostInclude"></p>
            </div>
            </div>

            <!-- 八、费用不含-->
            <div class="info_box" v-if="!!JouneryGroupInfo.CostNotInclude">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />费用不含</div>
            <div class="main2_right_m4_m">
              <p class="info_paragraph" v-html="JouneryGroupInfo.CostNotInclude"></p>
            </div>
            </div>

          </div>
        </div>
        <div class="clear"></div>
      </ul>

      <!-- 四、预订说明 -->
      <ul class="u_route" id="booking">
        <div class="main2_left">
          <div class="main2_left_t" style=""> <i class="fa fa-tasks"></i> 预订须知></div>
        </div>
        <div class="main2_right" v-for="(JouneryGroupInfo, index) in JouneryGroups" :key="index" :class="index == 0 ? 'wrap-box':'wrap-box hide'" find-trip-center>
          <div class="main2_right_m2 active">
            <!-- 七、注意事项-->
            <div class="info_box" v-if="!!JouneryGroupInfo.Notice">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />注意事项</div>
            <div class="main2_right_m4_m">
              <p class="info_paragraph" v-html="JouneryGroupInfo.Notice"></p>
            </div>
            </div>

            <!-- 八、特别提示 -->
            <div class="info_box" v-if="!!JouneryGroupInfo.Warm_prompt">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />特别提示</div>
            <div class="main2_right_m4_m">
              <p class="info_paragraph" v-html="JouneryGroupInfo.Warm_prompt"></p>
            </div>
            </div>

            <!-- 九、购物安排 -->
            <div class="info_box" v-if="!!JouneryGroupInfo.Shopping_explanation">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />购物安排</div>
            <div class="main2_right_m4_m">
              <p class="info_paragraph" v-html="JouneryGroupInfo.Shopping_explanation"></p>
            </div>
            </div>

            <!-- 十、自费补充协议 -->
            <div class="info_box" v-if="!!JouneryGroupInfo.Selfpaying_explanation">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />补充协议</div>
            <div class="main2_right_m4_m">
              <p class="info_paragraph" v-html="JouneryGroupInfo.Selfpaying_explanation"></p>
            </div>
            </div>

            <!-- 十一、接待旅行社信息 -->
            <div class="info_box" v-if="!!JouneryGroupInfo.Reception_explanation">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />当地接待社</div>
            <div class="main2_right_m4_m">
              <p class="info_paragraph" v-html="JouneryGroupInfo.Reception_explanation"></p>
            </div>
            </div>

            <!-- 十五、报名单位 -->
            <div class="info_box" v-if="travelAgency != ''">
            <div class="main2_right_m2_title trip_nav_m"><Icon type="ios-bookmark" />报名单位</div>
            <div class="main2_right_m4_m travelAgency">
              <div class="trip-ls none"><span class="travel-agency-text">公司名称</span>：<span v-html="travelAgency.title"></span></div>
              <div class="trip-ls none"><span class="travel-agency-text">联系人</span>：<span v-html="travelAgency.linkman"></span></div>
              <div class="trip-ls none"><span class="travel-agency-text">联系电话</span>：<span v-html="travelAgency.tel"></span></div>
            </div>
            </div>

          </div>
        </div>
        <div class="clear"></div>
      </ul>

      <!-- 五、文档附件 -->
      <ul v-if="!!Cmsfiles.length>0 && isVip" id="download">
        <div class="main2_left">
          <div class="main2_left_t"><i class="fa fa-file-text-o"></i>文档附件</div>
        </div>
        <div class="main2_right">
          <div class="main2_right_m2_title"><Icon type="ios-bookmark" />文档附件</div>
          <div class="main2_right_m3">
            <p v-for="(rows, index) in Cmsfiles" :key="index">
              <i class="fa fa-file-pdf-o" style="color: red;" v-if="rows.extend.indexOf('pdf')>0"></i>
              <i class="fa fa-file-word-o" v-else></i>
              <span class="file-name" @click="perview" :data-id="rows.id" :data-extend="rows.extend" style="">{{rows.name}}</span>
              <span class="down-load" @click="docDownload" :data-path="rows.realpath" style="color: red;">下载</span>
            </p>
          </div>
        </div>
        <div class="clear"></div>
      </ul>

      <!-- 五、签证信息 -->
      <ul v-show="false">
        <div class="main2_left">
          <div class="main2_left_t">
            <i class="iconfont icon-youhui"></i> 签证信息
          </div>
        </div>
        <div class="main2_right">
          <div class="main2_right_m2_title"><Icon type="ios-bookmark" />签证资料</div>
          <div class="main2_right_m3">
            <p>
              请根据自身情况选择签证所需材料：
              <a href="" target="_blank"><i class="iconfont icon-yuandian"></i><span>冰岛ADS旅游签证须知</span></a>
            </p>
          </div>
        </div>
        <div class="clear"></div>
      </ul>
    </div>

  </div>
</template>

<script>
import { goodsComment, goodsCommentNum, readTravelAgency } from '@/api/member.js';
import * as api from '@/api/common.js';
// vueUse
//import { useScroll, useAnchor } from '@vueuse/core'
import common from '@/plugins/common'
//const { y } = useScroll(window)
//const { scrollToAnchor } = useAnchor()


export default {
  name: 'ShowGoodsDetail',
  components: { 
    
   },
  props: {
    detail: { // 产品详情
      type: Object,
      default: null
    }
  },
  data () {
    return {
      commentList: [],   //评论列表
      commentParams: {   //评论传参
        pageNumber: 1,
        pageSize: 10,
        grade: '',
        goodsId: ''
      },
      commentTypeNum: {}, //评论数量，包括好中差分别的数量
      commentTotal: 0,    //评论总数
      onceFlag: true,     //只调用一次
      isVip: false,
      JouneryGroups: [],  //行程数据
      JouneryDayInfo: {},
      Cmsfiles: {},       //附件下载
      shareParams: {},    //分享数据
      travelAgency: {},   //报名单位
      ProductManager: '', //收客人
      travelShow: {},
      travelActive: -1,
      tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
      activeTab: 0,
      routerTab: 0,
      userInfo: {},

      modal: false,
      loading: true,

      dialogSrc: 'http://localhost:8070/jeecg-boot/sys/common/static/files/20240924/202409241022392X3bQFan.doc',
      visible: false,
      height: '500px',
      showScrollToTop: false,
    };
  },
  computed: {
    // 产品详情
    skuDetail () {
      return this.detail.result;
    }
  },

  methods: {

    // 设置产品详情高度
    changeHeight (name) { 
      // let heightCss = window.getComputedStyle(this.$refs[name]).height;
      // heightCss = parseInt(heightCss.substr(0, heightCss.length - 2)) + 89;
      // this.$refs.itemIntroDetail.style.height = heightCss + 'px';
    },

    // 修改评论页码
    changePageNum (val) { 
      this.commentParams.pageNumber = val;
      this.getList();
    },

    // 修改评论页数
    changePageSize (val) { 
      this.commentParams.pageNumber = 1;
      this.commentParams.pageSize = val;
      this.getList();
    },

    // 获取评论列表
    getList () { 
      this.commentParams.goodsId = this.skuDetail.goodsId;
      goodsComment(this.commentParams).then(res => {
        if (res.success) {
          this.commentList = res.result.records;
          this.commentTotal = res.result.total;
        }
      });
      goodsCommentNum(this.skuDetail.goodsId).then(res => {
        if (res.success) {
          this.commentTypeNum = res.result;
        }
      });
    },

    // 好中差评切换
    viewByGrade (grade) { 
      this.$set(this.commentParams, 'grade', grade);
      this.commentParams.pageNumber = 1;
      this.getList();
    },

    // 产品详情和评价之间的tab切换
    tabClick (name, type, id) { 
      if (type == '1') {
        this.activeTab = name;
        var e = $('#'+id).offset().top;
        switch (name) {
          case 1:
            e = e - 100;
            break;
          default:
            e = e - 110;
            break;
        }
        console.info(e, this.activeTab);
        $("html,body").animate({
          scrollTop: e
        })
      } else {
        this.routerTab = name;
      }
    },

    // 预览图片
    previewImg (img, item) { 
      this.$set(item, 'previewImg', img);
      this.$nextTick(() => {
        this.changeHeight('itemGoodsComment')
      });
    },

    hidePreviewImg (item) { // 隐藏预览图片
      this.$set(item, 'previewImg', '');
      this.$nextTick(() => {
        this.changeHeight('itemGoodsComment')
      });
    },

    rotatePreviewImg (type, item) { // 图片旋转
      if (type) {
        if (item.deg) {
          this.$set(item, 'deg', item.deg + 90);
        } else {
          this.$set(item, 'deg', 90);
        }
      } else {
        if (item.deg) {
          this.$set(item, 'deg', item.deg - 90);
        } else {
          this.$set(item, 'deg', -90);
        }
      }
    },

    //-----------2024-09-20--qindl----------------------------------------
    init() {
      this.onLoadProductInfo();
      this.onLoadJouneryGroups();
      this.buildJouneryDayInfo();
      this.buildTravelAgency();
    },

    //产品信息
    onLoadProductInfo() {
      var cmsArticle = this.skuDetail;
      this.isVip = cmsArticle["isVip"] || false;
    },

    //行程分组
    onLoadJouneryGroups() {
      var cmsArticle = this.skuDetail;
      var JouneryGroups = []

      //行程天数
      var JouneryGroupInfo = {
        'Days': cmsArticle['days'],
        'Nights': cmsArticle['nights']
      }

      // 四、详细行程
      var JouneryDetail = []
      var routes = cmsArticle['routes']
      var swiperSlidebox = []
      if (routes && routes.length) {
        var pat_traffic = new RegExp('(?:\\>(\\d+)\\:)?([\\w\\W]+?(?=\\>\\d+\\:)|[\\w\\W]+?$)', 'gi')
        var days = cmsArticle['days'] //routes.length
        for (var i = 0, itm, tt, travelTypes, travelPhotos, viewspots; i < days; i++) {
          itm = routes[i]
          //交通, 地点
          travelTypes = []
          // pat_traffic.lastIndex = -1;
          // while((tt = pat_traffic.exec(itm['traffic']))) {
          // 	travelTypes.push({
          // 		'Type': tt[1], 'TreeName': tt[2]
          // 	});
          // }

          //乌鲁木齐>1:中转地>1:南宁吴圩
          tt = itm['traffic'].split('>')
          if (tt.length > 1) {
            for (var j = 0, places; j < tt.length; j++) {
              if (j === 0) {
                places = tt[j]
                travelTypes.push({
                  'Type': '',
                  'TreeName': places
                })
              } else {
                places = tt[j].split(':')
                travelTypes.push({
                  'Type': places[0],
                  'TreeName': places[1]
                })
              }
            }
          } else {
            travelTypes.push({
              'Type': '',
              'TreeName': tt[0]
            })
          }

          //图片 'ImgUrl': './cmsPhotoController.do?view&fileid=' + tt[j]['id']
          travelPhotos = []
          tt = itm['photos']
          if (tt && tt.length) {
            for (var j = 0; j < tt.length; j++) {
              travelPhotos.push({ 'ImgUrl': this.$config.staticDomainURL + '/' + tt[j]['realpath'] })
            }
            swiperSlidebox.push('#swiper-wrapper-' + i)
          }

          viewspots = []
          tt = itm['viewspot']
          if (tt && tt.length > 0) {
            tt = tt.split(' ')
            for (var j = 0; j < tt.length; j++) {
              var name = ''
              if (tt[j] !== 'null' && tt[j] !== '') {
                name = tt[j]
              }
              viewspots.push({ 'name': name })
            }
          } else {
            //viewspots.push({ 'name': '' })
          }

          //行程线程
          JouneryDetail.push({
            'Days': (1 + i),
            'ProductTravelTypes': travelTypes,
            'Breakfast': itm['breakfast'],
            'HaveLunch': itm['lunch'],
            'Dinner': itm['dinner'],
            'HotelList': itm['stay'],
            'viewspots': viewspots,
            'Content': itm['detail'],
            'JouneryImgInfo': travelPhotos
          })
        }
        //2020-09-25
        //me.cacheData.swiperWrapper = swiperSlidebox;
      }

      JouneryGroupInfo['JouneryDetail'] = JouneryDetail

      //四、行程特色 
      JouneryGroupInfo['Summary'] = cmsArticle['summary']
      //五、费用包含 
      JouneryGroupInfo['CostInclude'] = cmsArticle['expenseContain']
      //六、费用不含
      JouneryGroupInfo['CostNotInclude'] = cmsArticle['expenseNcontain']
      //七、注意事项
      JouneryGroupInfo['Notice'] = cmsArticle['notice']
      //八、特别提示
      JouneryGroupInfo['Warm_prompt'] = cmsArticle['warmPrompt']
      //九、购物安排
      JouneryGroupInfo['Shopping_explanation'] = cmsArticle['shoppingExplanation']
      //十、自费补充协议
      JouneryGroupInfo['Selfpaying_explanation'] = cmsArticle['selfpayingExplanation']
      //十一、接待旅行社信息
      JouneryGroupInfo['Reception_explanation'] = cmsArticle['receptionExplanation']

      //添加到行程分组
      JouneryGroups.push(JouneryGroupInfo)
      //
      this.JouneryGroups = JouneryGroups

      //十五、附件下载
      var Cmsfiles = cmsArticle['cmsFiles']
      this.Cmsfiles = Cmsfiles //团期信息

      //十七、收客计调
      var manager = cmsArticle['map']
      this.ProductManager = manager || ''
    },

    /**
     * 生成详细行程
     */
    buildJouneryDayInfo() {
      var me = this
      var JouneryGroups = me.JouneryGroups

      //取出文章的行程, 拷贝
      var JouneryDayInfo = [], JouneryInfo, ProductTravelTypes
      var JouneryGroupInfo, JouneryDetail, Detail
      for (var i = 0; i < JouneryGroups.length; i++) {
        JouneryGroupInfo = JouneryGroups[i]
        JouneryDetail = JouneryGroupInfo['JouneryDetail']
        for (var j = 0; j < JouneryDetail.length; j++) {
          Detail = JouneryDetail[j]
          JouneryInfo = {}
          for (var k in Detail) {
            if (/(?:Breakfast|HaveLunch|Dinner)$/.test(k)) {
              continue
            }
            JouneryInfo[k] = Detail[k]
          }
          //用餐
          //JouneryInfo['Lunch'] = '早(' + Detail['Breakfast'] + ') 中(' + Detail['HaveLunch'] + ') 晚(' + Detail['Dinner'] + ')';

          var Lunch = []
          if (Detail['Breakfast'] === '1') {
            Lunch.push({
              'Type': 'right',
              'Name': '早'
            })
          } else {
            Lunch.push({
              'Type': 'close',
              'Name': '早'
            })
          }
          if (Detail['HaveLunch'] === '1') {
            Lunch.push({
              'Type': 'right',
              'Name': '中'
            })
          } else {
            Lunch.push({
              'Type': 'close',
              'Name': '中'
            })
          }
          if (Detail['Dinner'] === '1') {
            Lunch.push({
              'Type': 'right',
              'Name': '晚'
            })
          } else {
            Lunch.push({
              'Type': 'close',
              'Name': '晚'
            })
          }
          JouneryInfo['Lunch'] = Lunch

          JouneryDayInfo.push(JouneryInfo)
        }
        //设计缺陷只支持一个行程
        break
      }

      this.JouneryDayInfo = JouneryDayInfo
    },

    // 导航栏
    RouteChange(t) {
      var e = '[data-linecode="' + t + '"]';
      $(".main2_right_n2").find("div" + e).addClass("active").siblings().removeClass("active");
      var a = $(".main2_right_n2").find("div" + e).index() - 1;
      $(".main2_right_m2").eq(a + 1).addClass("active").siblings().removeClass("active");
      var i = $(".trip_nav").find('span[id="' + t + '"]') , n = i.parent();
      $(".trip_nav .li").prepend(i),
      $(".trip_nav .li").attr("data-sort", $(".trip_nav .li").find("span").attr("route-data")),
      n.prepend($(".trip_nav .li").find("span").eq(1)),
      n.attr("data-sort", n.find("span").attr("route-data")),
      $(".trip_nav .li1").sortElements(function(t, e) {
        return $(t).attr("data-sort") > $(e).attr("data-sort") ? 1 : -1
      }),
      $(".main2_right_m2_nav .route_menu").eq(a).addClass("curr").siblings().removeClass("curr"),
      $(".main2_right_m2_nav .route_menu").eq(a).show().siblings(".main2_right_m2_nav .route_menu").hide(),
      $(".main2_right_m2_nav .route_menu").eq(a).find("li").eq(0).addClass("active"),
      activityDetailsHeightInit(),
      stroke = $(".main2_right_m2.active").find(".main2_right_m3_m.stroke")
    },

    /** 
     * 行程介绍
     */
    ready() {
      // 主标题栏 -- 位置
      var t = 0;
      if ($(".nav_li").offset() && $(".nav_li").offset().top) {
        t = $(".nav_li").offset().top;
      }

      // 详细行程 -- 位置
      var featureTop = 0;
      if ($("#feature").offset() && $("#feature").offset().top) {
        featureTop = $("#feature").offset().top + $("#feature").height();
      }

      $(".nav_li").offset().top;

      // 副标题栏 行程A B
      var e = $(".main2_right_m2.active .main2_right_m2_title.trip_nav_m").eq(0).offset().top || 0;

      // 详细行程 main2_right_m3_m
      var stroke = $(".main2_right_m2.active").find(".main2_right_m3_m.stroke");
      $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        //console.info(scrollTop, t, featureTop)
        if (scrollTop > t  ) {
          // 菜单导航
          $(".nav_li").addClass("nav_li_fiexd"); 
          // 产品内容
          $(".main2").css("paddingTop", 40);
          // 菜单导航，滚动到某处，标签高亮
          $(".main2 ul").each(function(t, e) {
            //console.info($(window).scrollTop(), t, e, stroke.offset().top);
            //$(window).scrollTop() + 50 >= $(e).offset().top && $(".nav_left .li").eq(t).addClass("active").siblings().removeClass("active");
          })
        } else {
          $(".nav_li").removeClass("nav_li_fiexd");
          $(".main2").css("paddingTop", 0);
        }

        // 天数导航
        if (scrollTop >= t + featureTop) {
          $(".trip_m").addClass("trip_m_fiexd"); 
        } else {
          $(".trip_m").removeClass("trip_m_fiexd");
        }

        // 菜单高亮 - 滚动
        if (scrollTop + 80 >= e ) {
          //$(".main2_right_m2_nav").addClass("fiexd").show();
          $(".main2_right_m2.active").find(".trip_nav_m").each(function(t, e) {
            console.info($(window).scrollTop(), t, e);
            $(window).scrollTop() + 80 >= $(e).offset().top && ee <= $(e).offset().top && $(".nav_left .li").eq(t).addClass("active").siblings().removeClass("active")
          })
        } else {
          //$(".main2_right_m2_nav").removeClass("fiexd").hide();
        }

        //console.info($(window).scrollTop(), stroke.offset().top, stroke.height())
        //$(window).scrollTop() + 80 >= stroke.offset().top &&
        // 天数
        if ($(window).scrollTop() <= stroke.offset().top + stroke.height() - 150) {
          $(".trip_m").fadeIn();
          $(".main2_right_m2.active").find(".stroke .main2_right_m3_m1").each(function(t, e) {
            //console.info($(window).scrollTop() + 82,  $(e).offset().top, t)
            $(window).scrollTop() + 82 >= $(e).offset().top && $(".u_route").find(".trip_m .li").eq(t).addClass("active").siblings().removeClass("active")
          })
        } else {
          $(".trip_m").fadeOut();
        } 
      });

      //----------------------------------------------
      // 天数导航
      $(".trip_m .li").on("click", function() {
        var t = $(this).index()
          , e = $(".main2_right_m2.active").find(".stroke .main2_right_m3_m1").eq(t).offset().top;
        $("html,body").animate({
            scrollTop: e - 45
        })
      });

    },

    /**
     * 跳转附件下载
     */
    docDownload(e) {
      //https://www.jianshu.com/p/2ff6c09b1da0
      var filepath = e.currentTarget.dataset.path
      // api.docDownload(filepath)
      window.location.href = this.$config.staticDomainURL + '/sys/common/static' + '/' + filepath;
    },

    /**
     * 转入pdf的id编号，转到在浏览页面
     */
    perview(e) {
      //this.$router.push({ name: 'pdf', query: ''})
      var extend = e.currentTarget.dataset.extend;
      if (extend != '.pdf') {
        return
      }

      var query = {};
      query.id = e.currentTarget.dataset.id;
      if (!query.id) {
        return
      }

      let url = '/pages/weixin/pdf/online'
      //this.$navTo.togo(url, query)
      //this.$router.push({path: '/pdfOnline', query: query})

      const routeUrl = this.$router.resolve({ name: 'pdfOnline', query: query });
      window.open(routeUrl.href, '_blank');

    },

    /**
     * 收客单位
     */
    buildTravelAgency: function() {
      var me = this
      //----------------------------------------------
      var share = common.getQueryString('share')
      var param = {}
      var user = this.userInfo
      //测试
      if (process.env.NODE_ENV === 'development' && !share) {
        //share = 'f0ca431a79eddbac0179ee99a84d0061'
      }

      param.id = share || user.id || ''
      if (param.id === '') {
        console.info('收客单位--未获取到会员编号。')
        me.travelAgency = ''
        return
      }

      readTravelAgency(param).then(res => {
        var travelAgency = {}
        if (res && res.success) {
          var data = res.result || {}
          var state = data.state || ''
          if ('1' === state) {
            travelAgency = {
              title: data.corpName,
              linkman: data.name,
              tel: data.tel
            }
          }
        }
        if (JSON.stringify(travelAgency) === '{}') {
          me.travelAgency = ''
        } else {
          me.travelAgency = travelAgency
        }
      })
    },

    handleScroll() {
      console.info(this.showScrollToTop)
      this.showScrollToTop = window.pageYOffset > 200;
    },
  },

  mounted () {
    // 登录会员本地缓存
    if (this.Cookies.getItem("userInfo")) {
      this.userInfo = JSON.parse(this.Cookies.getItem("userInfo"));
    }

    // 手动设置详情高度，解决无法撑开问题
    this.$nextTick(async () => { 
      await this.init();
      setTimeout(this.changeHeight('itemIntroGoods'), 2000);
      await this.ready();
    });

    // 界面滚动
    //window.addEventListener('scroll', this.handleScroll)
    
    // 客服评价
    this.getList();

  },

  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },

};
</script>

<style scoped lang="scss">

@import '~@/assets/font/awesome/font-awesome.css';

.item-intro{
  >img{
    display:block;
  }
}
/***************产品详情介绍和推荐侧边栏开始***************/
.item-intro-show{

  width: 1200px;
  margin: 15px auto;
  display: flex;
  overflow-x: hidden;
  flex-direction: row;

}
.item-intro-recommend{
  width: 200px;
  display: flex;
  flex-direction: column;
}
.item-intro-recommend-column{
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 5px #999;
}
.item-recommend-title{
  width: 100%;
  height: 38px;
  font-size: 16px;
  line-height: 38px;
  color: #fff;
  background-color: $theme_color;
  box-shadow: 0px 0px 5px $theme_color;
  text-align: center;
}
.item-recommend-column{
  margin-top: 15px;
}
.item-recommend-intro{
  padding: 5px 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}
.item-recommend-img{
  width: 80%;
  margin: 0px auto;
  cursor: pointer;
}
.item-recommend-img img{
  width: 100%;
}
.item-recommend-top-num{
  color: #fff;
  margin: 0px 2px;
  padding: 1px 5px;
  border-radius: 12px;
  background-color: $theme_color;
}
.item-recommend-price{
  color: $theme_color;
  font-weight: bolder;
}
.item-intro-detail{
  margin: 0  30px;
  width: 100%;
}
.item-intro-nav{
  width: 100%;
  height: 38px;
  background-color: #F7F7F7;
}
.item-intro-nav ul{
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.item-intro-nav li{
  float: left;
  height: 100%;
  width: 120px;
  line-height: 38px;
  text-align: center;
  color: $theme_color;
}
.item-intro-nav li:first-child{
  background-color: $theme_color;
  color: #fff;
}
.item-intro-img {
  width: 100%;
  min-height: 300px;
  :deep(img){
    margin:0 auto;
  }
}
.item-intro-img img{
  max-width: 1000px;
}
/************* 产品参数 *************/
.item-param-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
.item-param-box {
  padding: 5px;
  padding-left: 30px;
  width: 240px;
  height: 36px;
  font-size: 14px;
}
.item-param-title {
  color: #232323;
}
.item-param-content {
  color: #999;
}
.remarks-title {
  padding-left: 15px;
  height: 36px;
  font-size: 16px;
  font-weight: bolder;
  line-height: 36px;
  color: #666666;
  background-color: #F7F7F7;
}
.remarks-analyse-box {
  padding: 15px;
  display: flex;
  align-items: center;
}
.remarks-analyse-goods {
  margin-left: 15px;
  margin-right: 15px;
}
.remarks-analyse-num {
  font-size: 26px;
}
.remarks-analyse-title {
  font-size: 12px;
  line-height: 20px;
}
.remarks-bar {
  padding-left: 15px;
  height: 36px;
  line-height: 36px;
  color: #666666;
  background-color: #F7F7F7;
  .selectedBar{
    color: $theme_color;
  }
}
.remarks-bar span {
  margin-right: 15px;
  &:hover{
    color: $theme_color;
    cursor: pointer;
  }
}
.remarks-box {
  padding: 15px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px #ccc dotted;
}
.remarks-user {
  width: 180px;
}
.remarks-user-name {
  padding-left: 15px;
}
.remarks-content-box {
  width: calc(100% - 180px);
  .comment-img{
    display: flex;
    .borderColor{
      border-color: $theme_color;
    }
    div{
      border: 1px solid #999;
      margin-right: 5px;
      width: 50px;
      height: 50px;
      overflow: hidden;
      img{width: 100%;height: 100%;}
    }
  }
  .preview-img{
    position: relative;
    border: 1px solid #eee;
    margin: 10px 0;
    width: 200px;

    div{
      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 3;
      span{
        display: inline-block;
        background-color: rgba(0,0,0,.5);
        padding:3px 5px;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
      }
      span:nth-child(1) .ivu-icon {
        transform: rotateY(180deg);
      }
    }

  }
}

.remarks-content {
  font-size: 14px;
  color: #232323;
  line-height: 28px;
}
.remarks-sub {
  margin-top: 5px;
  color: #ccc;
}
.remarks-time {
  margin-left: 15px;
}
.remarks-page {
  margin: 15px;
  display: flex;
  justify-content:flex-end;
}
/***************产品详情介绍和推荐侧边栏结束***************/
/* 改变便签页样式 */
.ivu-tabs-ink-bar {
  background-color: $theme_color !important;
}
:deep(ivu-tabs-bar){
  border: none;
}
.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab{
  border-radius: 0px;
  color: #999;
  height: 38px;
  // background: #F7F7F7;
}
.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active{
  color: #fff;
  background-color: $theme_color;
}
.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active:before{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  color: #fff;
  background: #F7F7F7;
  position: absolute;
  top: 0;
  left: 0;
}
.ivu-rate-star-full:before, .ivu-rate-star-half .ivu-rate-star-content:before {
  color: $theme_color;
}
table{
  border-color:#efefef;
  color: #999;
  min-width: 30%;
  margin-left: 30px;
  font-size: 12px;
  tr{
    td:nth-child(1){
      width: 100px;
    }
    td:nth-child(2){
      padding-left: 20px;
    }
  }
  td{
    padding: 6px;
  }
}
.goods-params {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-left: 30px;
  span{color:#999}
}
.travelAgency {
  .trip-ls {
    padding: 5px 0;
  }
  .travel-agency-text {
    display: inline-block;
    text-align: justify;
    text-align-last:justify;
  }
}

.remarks-bar span {
  margin-right: 15px;
  &:hover{
    color: $theme_color;
    cursor: pointer;
  }
}
</style>
